<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线性渐变</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /* background-color: #bfa; */
            /* 
                通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
                ！！渐变是图片，需要通过background-image来设置
                
                线性渐变，颜色沿着一条直线发生变化
                linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域
                -线性渐变的开头，我们可以指定一个渐变的方向
                to left:从右向左
                to right:从左向右
                to bottom：从上到下
                to top：从下到上
                xxxdeg deg表示度数
                turn表示圈

                -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
                    也可以手动指定渐变的分布情况

                repeating-linear-gradient()可以平铺的线性渐变
            */
            /* background-image: linear-gradient(red,yellow); */
            /* background-image: linear-gradient(to right, red ,yellow); */
            /* background-image: linear-gradient(to top left, red ,yellow); */
            /* background-image: linear-gradient(100deg ,red,yellow); */
            /* background-image: linear-gradient(1turn, red ,yellow); */
            /* background-image: linear-gradient(to right ,red,yellow,#bfa,orange); */
            /* 50px是红色最纯的地方，50px之前都是红色，从50px之后开始向黄色渐变.100px是黄色最纯的地方，下面没有其他颜色，用黄色填充 */
            /* background-image: linear-gradient(red 50px,yellow 100px); */
            /* 默认情况下*/
            /* background-image: linear-gradient(red 0px,yellow 200px); */
             /* background-image: linear-gradient(red 50px,yellow 100px ,green 150px,orange 200px); */
            /* 50px到100px之间是一个渐变效果 */
            background-image: repeating-linear-gradient(red 50px,yellow 100px);
        }

        .box2{
            width: 200px;
            height: 200px; 
            background-image: repeating-linear-gradient(pink 0px,#bfa 50px);

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
    
</body>
</html>